<template>
    <div class="configForm">
        <div class="configForm-content">
            <el-form :model="form" label-width="80px" :rules="rules" ref="configForm">
                <el-form-item label="预约次数" prop="maxNoShowCount">
                   <div style="display: flex; align-items: center;padding-left: 20px;">
                        每人每周最多爽约
                            <el-input v-model="form.maxNoShowCount" style="width: 50px;margin: 0 12px;" />
                        次
                   </div>
                </el-form-item>
                <el-form-item label="挂号时间" prop="latestRegistrationTime">
                    <div style="display: flex; align-items: center;padding-left: 20px;">
                        截至医生下班前
                            <el-input v-model="form.latestRegistrationTime" style="width: 50px;margin: 0 12px;" />
                        分钟
                   </div>
                </el-form-item>
                <el-form-item label="预约范围" prop="releaseAheadDay">
                     <div style="display: flex; align-items: center;padding-left: 20px;">
                        最多提前
                            <el-input v-model="form.releaseAheadDay" style="width: 50px;margin: 0 12px;" />
                        可以预约
                   </div>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-btnPermission="'btn-dict-updata'" @click="saveDict" style="padding: 5px 30px;">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script setup lang="ts">
    import type {RegistrationConfigFormData} from '@/types/registrationSettings/index.ts';
    import type { FormInstance, FormRules } from 'element-plus'
    import {getDoctorDict, saveDict as apiSaveDict} from '@/api/register';
    const configForm = ref<FormInstance>();

    const rules:FormRules = {
        maxNoShowCount: [
            { required: true, message: '请输入预约次数', trigger: 'blur' },
        ],
        latestRegistrationTime: [
            { required: true, message: '请输入挂号时间', trigger: 'blur' },
        ],
        releaseAheadDay: [
            { required: true, message: '请输入预约范围', trigger: 'blur' },
        ]
    };
    const form = ref<RegistrationConfigFormData>({
        "maxNoShowCount": 0, //最大爽约次数;一周可以爽约几次
        "latestRegistrationTime": 0, //最晚取号时间;截止到医生下班前半个小时可以取号
        "releaseAheadDay": 0 //最多提前几天可以预约
    });
    const saveDict = () => {
        if (!configForm.value) return;
        configForm.value.validate((valid: boolean) => { 
            if (valid) {
                // 提交表单逻辑
                form.value.releaseAheadDay =  Number(form.value.releaseAheadDay);
                apiSaveDict(form.value).then(response => {
                   if(response.code == '200'){
                     ElMessage({
                        type: 'success',
                        message: '保存成功'
                    });
                    getDoctorDictData(); // 刷新数据
                   }else{
                   
                   }

                })
                //console.log('提交成功', form.value);
            } else {
                //console.error('表单验证失败');
            }
        });
    };  
    onMounted(() => {
        getDoctorDictData();
    });
    const getDoctorDictData = async () => {
        try {
            const response = await getDoctorDict();
            if(response.code == '200'){
                form.value = response.data;
            }else{
                
            }
           
        } catch (error) {
            //console.error('获取医生字典失败:', error);
        }
    };

</script>
<style lang="scss" scoped>
    .configForm {
        padding: 20px;
    }
    .configForm-content {
        max-width: 600px;
    }
</style>